<template>
  <div class="outer">
    <div class="pic1" ref="myChart1"></div>
    <div class="pic2" ref="myChart2"></div>
    <div class="pic3" ref="myChart3"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
 export default {
    name: "datapic",
    data() {
      return {
        typedatalist: [],
        userdatalist:[],
        sampledatalist:[],
        photodatalist:[],
        cosdatalist:[],
        list:[]
      };
    },
    mounted() {
      this.gettpyedata();
      this.getuserdata();
      this.fetchData();
    },
    methods:{
      gettpyedata() {
        this.$http.get("/petstype/count/type").then(res=>{
          //console.log(res);
          if(res.data.status == 200){
            this.typedatalist = res.data.data;
            this.drawBing(); //绘制
          }else{
            this.$message.error(res.data.message);
          }
        })
      },
      getuserdata() {
        this.$http.get("/user/count").then(res=>{
          //console.log(res);
          if(res.data.status == 200){
            this.userdatalist = res.data.data;
            this.drawLine();
          }else{
            this.$message.error(res.data.message);
          }
        })
      },
      async getcosdata() {
        try {
        const res = await this.$http.get("/cos/count");
          if(res.data.status == 200){
            console.log(res);
          this.cosdatalist = res.data.data;
        } else {
          this.$message.error(res.data.message);
        }
        } catch (error) {
          console.log(error);
        }
      },
      async getphotodata() {
        try {
        const res = await this.$http.get("/photo/count");
          if(res.data.status == 200){
            console.log(res);
          this.photodatalist = res.data.data;
        } else {
          this.$message.error(res.data.message);
        }
        } catch (error) {
          console.log(error);
        }
      },
      async getsampledata() {
        try {
        const res = await this.$http.get("/sample/count");
          if(res.data.status == 200){
            console.log(res);
          this.sampledatalist = res.data.data;
        } else {
          this.$message.error(res.data.message);
        }
        } catch (error) {
          console.log(error);
        }
      },
      async fetchData() {
        await Promise.all([
          this.getphotodata(),
          this.getcosdata(),
          this.getsampledata()
        ]);
        this.drawZhu();
      },
      drawBing(){
        let myChart = echarts.init(this.$refs.myChart3);
        var option;
        option = {
          title: {
            text: '宠物数量后台管理（个）',
          },
          tooltip: {
            trigger: 'item'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          legend: {
            bottom: '5%',
            left: 'center'
          },
          //右上角下载
          toolbox: {
              feature: {
              saveAsImage: {}
              }
          },
          series: [
            {
              name: '宠物数量（个）',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data:[
                {value: JSON.parse(JSON.stringify(this.typedatalist))[0].number , name : JSON.parse(JSON.stringify(this.typedatalist))[0].typename},
                {value: JSON.parse(JSON.stringify(this.typedatalist))[1].number , name : JSON.parse(JSON.stringify(this.typedatalist))[1].typename},
                {value: JSON.parse(JSON.stringify(this.typedatalist))[2].number , name : JSON.parse(JSON.stringify(this.typedatalist))[2].typename},
                {value: JSON.parse(JSON.stringify(this.typedatalist))[3].number , name : JSON.parse(JSON.stringify(this.typedatalist))[3].typename},
                {value: JSON.parse(JSON.stringify(this.typedatalist))[4].number , name : JSON.parse(JSON.stringify(this.typedatalist))[4].typename},
                {value: JSON.parse(JSON.stringify(this.typedatalist))[5].number , name : JSON.parse(JSON.stringify(this.typedatalist))[5].typename},
              ]
            }
          ]
        };

        option && myChart.setOption(option);

      },
      drawLine(){
        let myChart = echarts.init(this.$refs.myChart1);
        var option;
        option = {
          title: {
            text: '每月用户数量（个）'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            right: '6%',
            data: ['用户数']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          //右上角下载
          toolbox: {
              feature: {
              saveAsImage: {}
              }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [
              {value: JSON.parse(JSON.stringify(this.userdatalist))[0].month},
              {value: JSON.parse(JSON.stringify(this.userdatalist))[1].month},
              {value: JSON.parse(JSON.stringify(this.userdatalist))[2].month},
              {value: JSON.parse(JSON.stringify(this.userdatalist))[3].month},
              {value: JSON.parse(JSON.stringify(this.userdatalist))[4].month},
              {value: JSON.parse(JSON.stringify(this.userdatalist))[5].month},
              {value: JSON.parse(JSON.stringify(this.userdatalist))[6].month},
              {value: JSON.parse(JSON.stringify(this.userdatalist))[7].month},
              {value: JSON.parse(JSON.stringify(this.userdatalist))[8].month},
              {value: JSON.parse(JSON.stringify(this.userdatalist))[9].month},
              {value: JSON.parse(JSON.stringify(this.userdatalist))[10].month},
              {value: JSON.parse(JSON.stringify(this.userdatalist))[11].month},
              {value: JSON.parse(JSON.stringify(this.userdatalist))[12].month}
            ]
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '用户数',
              type: 'line',
              stack: 'Total',
              data: [JSON.parse(JSON.stringify(this.userdatalist))[0].usercount,
                     JSON.parse(JSON.stringify(this.userdatalist))[1].usercount,
                     JSON.parse(JSON.stringify(this.userdatalist))[2].usercount,
                     JSON.parse(JSON.stringify(this.userdatalist))[3].usercount,
                     JSON.parse(JSON.stringify(this.userdatalist))[4].usercount,
                     JSON.parse(JSON.stringify(this.userdatalist))[5].usercount,
                     JSON.parse(JSON.stringify(this.userdatalist))[6].usercount,
                     JSON.parse(JSON.stringify(this.userdatalist))[7].usercount,
                     JSON.parse(JSON.stringify(this.userdatalist))[8].usercount,
                     JSON.parse(JSON.stringify(this.userdatalist))[9].usercount,
                     JSON.parse(JSON.stringify(this.userdatalist))[10].usercount,
                     JSON.parse(JSON.stringify(this.userdatalist))[11].usercount,
                     JSON.parse(JSON.stringify(this.userdatalist))[12].usercount,
                     ]
            }
          ]
        };
        option && myChart.setOption(option);
      },
      drawZhu(){
        let myChart = echarts.init(this.$refs.myChart2);
        var option;
        option = {
          title: {
          text:'每月宠物服务次数（次)'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
            type: 'shadow'
            }
          },
          legend: {
            right: '4%',
          },
          grid: {
            left: '1%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          //右上角下载
          toolbox: {
              feature: {
              saveAsImage: {}
              }
          },
          xAxis: [
            {
              type: 'category',
              data: [
                      {value: JSON.parse(JSON.stringify(this.sampledatalist))[0].month},
                      {value: JSON.parse(JSON.stringify(this.sampledatalist))[1].month},
                      {value: JSON.parse(JSON.stringify(this.sampledatalist))[2].month},
                      {value: JSON.parse(JSON.stringify(this.sampledatalist))[3].month},
                      {value: JSON.parse(JSON.stringify(this.sampledatalist))[4].month},
                      {value: JSON.parse(JSON.stringify(this.sampledatalist))[5].month},
                      {value: JSON.parse(JSON.stringify(this.sampledatalist))[6].month},
                      {value: JSON.parse(JSON.stringify(this.sampledatalist))[7].month},
                      {value: JSON.parse(JSON.stringify(this.sampledatalist))[8].month},
                      {value: JSON.parse(JSON.stringify(this.sampledatalist))[9].month},
                      {value: JSON.parse(JSON.stringify(this.sampledatalist))[10].month},
                      {value: JSON.parse(JSON.stringify(this.sampledatalist))[11].month},
                      {value: JSON.parse(JSON.stringify(this.sampledatalist))[12].month},
                      {value: JSON.parse(JSON.stringify(this.sampledatalist))[13].month},
                      {value: JSON.parse(JSON.stringify(this.sampledatalist))[14].month},
                      {value: JSON.parse(JSON.stringify(this.sampledatalist))[15].month},
              ]

            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '宠物护理',
              type: 'bar',
              stack: 'Ad',
              emphasis: {
                focus: 'series'
              },
              data: [
                JSON.parse(JSON.stringify(this.cosdatalist))[0].coscount,
                JSON.parse(JSON.stringify(this.cosdatalist))[1].coscount,
                JSON.parse(JSON.stringify(this.cosdatalist))[2].coscount,
                JSON.parse(JSON.stringify(this.cosdatalist))[3].coscount,
                JSON.parse(JSON.stringify(this.cosdatalist))[4].coscount,
                JSON.parse(JSON.stringify(this.cosdatalist))[5].coscount,
                JSON.parse(JSON.stringify(this.cosdatalist))[6].coscount,
                JSON.parse(JSON.stringify(this.cosdatalist))[7].coscount,
                JSON.parse(JSON.stringify(this.cosdatalist))[8].coscount,
                JSON.parse(JSON.stringify(this.cosdatalist))[9].coscount,
                JSON.parse(JSON.stringify(this.cosdatalist))[10].coscount,
                JSON.parse(JSON.stringify(this.cosdatalist))[11].coscount,
                JSON.parse(JSON.stringify(this.cosdatalist))[12].coscount,
                JSON.parse(JSON.stringify(this.cosdatalist))[13].coscount,
                JSON.parse(JSON.stringify(this.cosdatalist))[14].coscount,
                JSON.parse(JSON.stringify(this.cosdatalist))[15].coscount,
              ]
            },
            {
              name: '宠物摄影',
              type: 'bar',
              stack: 'Ad',
              emphasis: {
                focus: 'series'
              },
              data: [
                JSON.parse(JSON.stringify(this.photodatalist))[0].photocount,
                JSON.parse(JSON.stringify(this.photodatalist))[1].photocount,
                JSON.parse(JSON.stringify(this.photodatalist))[2].photocount,
                JSON.parse(JSON.stringify(this.photodatalist))[3].photocount,
                JSON.parse(JSON.stringify(this.photodatalist))[4].photocount,
                JSON.parse(JSON.stringify(this.photodatalist))[5].photocount,
                JSON.parse(JSON.stringify(this.photodatalist))[6].photocount,
                JSON.parse(JSON.stringify(this.photodatalist))[7].photocount,
                JSON.parse(JSON.stringify(this.photodatalist))[8].photocount,
                JSON.parse(JSON.stringify(this.photodatalist))[9].photocount,
                JSON.parse(JSON.stringify(this.photodatalist))[10].photocount,
                JSON.parse(JSON.stringify(this.photodatalist))[11].photocount,
                JSON.parse(JSON.stringify(this.photodatalist))[12].photocount,
                JSON.parse(JSON.stringify(this.photodatalist))[13].photocount,
                JSON.parse(JSON.stringify(this.photodatalist))[14].photocount,
                JSON.parse(JSON.stringify(this.photodatalist))[15].photocount,
              ]
            },
            {
              name: '宠物寄养',
              type: 'bar',
              stack: 'Ad',
              emphasis: {
                focus: 'series'
              },
              data: [
                JSON.parse(JSON.stringify(this.sampledatalist))[0].samplecount, 
                JSON.parse(JSON.stringify(this.sampledatalist))[1].samplecount,
                JSON.parse(JSON.stringify(this.sampledatalist))[2].samplecount,
                JSON.parse(JSON.stringify(this.sampledatalist))[3].samplecount,
                JSON.parse(JSON.stringify(this.sampledatalist))[4].samplecount,
                JSON.parse(JSON.stringify(this.sampledatalist))[5].samplecount,
                JSON.parse(JSON.stringify(this.sampledatalist))[6].samplecount,
                JSON.parse(JSON.stringify(this.sampledatalist))[7].samplecount,
                JSON.parse(JSON.stringify(this.sampledatalist))[8].samplecount,
                JSON.parse(JSON.stringify(this.sampledatalist))[9].samplecount,
                JSON.parse(JSON.stringify(this.sampledatalist))[10].samplecount,
                JSON.parse(JSON.stringify(this.sampledatalist))[11].samplecount,
                JSON.parse(JSON.stringify(this.sampledatalist))[12].samplecount,
                JSON.parse(JSON.stringify(this.sampledatalist))[13].samplecount,
                JSON.parse(JSON.stringify(this.sampledatalist))[14].samplecount,
                JSON.parse(JSON.stringify(this.sampledatalist))[15].samplecount,
              ],
            }
          ]
        };
        option && myChart.setOption(option);
      }
    }
    }
</script>
<style>
  .outer{
    width: 90%;
    margin: 40px auto;
    height: 825px;
    position: relative;
  }
  .pic1{
    position: absolute;
    left: 0;
    top: 0;
    width:45%;
    height: 300px;
    margin:auto;
  }

  .pic2{
    position: absolute;
    right: 0;
    top: 0;
    width:51%;
    height: 300px;
    margin:auto;
  }
  .pic3{
    position: absolute;
    left: 0;
    bottom: 0;
    width:99%;
    height: 500px;
    margin:auto;
  }
</style>